<template>
  <!-- 学员评价 -->
  <div class="lession-evaluate">
    <div class="evaluate-score">
      <div class="score-left">
        <div class="score-left--number">
          <span class="score-left--defen">{{ score.averageScore }}</span>
          <span class="score-left--manfen">满分10分</span>
        </div>

        <div class="score-left--dengji">
          <uiRate v-model="score.averageScore" allowHalf readonly size="48"></uiRate>
        </div>
      </div>
      <!-- 评价操作 -->
      <div class="score-right" @click="handleClickGotoEvaluate">我要评价</div>
    </div>
    <div class="evaluate-content-container">
      <uiScroll
        class="page-scroll"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        :up="upOption"
        @up="loadComments"
        height="100"
      >
        <div
          class="evaluate-pinjia ui-1px-b"
          v-for="(item, parentIndex) in list"
          :key="parentIndex"
        >
          <div class="pingjia-avatar">
            <image :src="item.parent.avatar" alt class="touxiang" style="vertical-align: bottom;" />
          </div>
          <div class="pingjia-content">
            <div class="pingjia-maininfo">
              <div class="pingjia-maininfo--info">
                <span>
                  <span class="pingjia-maininfo--name">{{item.parent.nickName }}</span>
                  <span class="pingjia-maininfo--rate">
                    <uiRate
                      v-model="item.parent.commentLv"
                      allowHalf
                      readonly
                      size="32"
                      color="#f4cd1f"
                    ></uiRate>
                  </span>
                </span>
                <span>
                  <span class="pingjia-maininfo--jigezan">{{ item.parent.likeNum }}&nbsp;</span>
                  <image
                    src="/static/images/detail/zan.png"
                    alt
                    class="pingjia-maininfo--pinlun-dianzan"
                    v-if="item.parent.isAlreadyLike == 2"
                    @click="handleClickAlreadyLike(item)"
                  />
                  <image
                    src="/static/images/detail/zan-1.png"
                    alt
                    class="pingjia-maininfo--pinlun-dianzan"
                    v-if="item.parent.isAlreadyLike == 1"
                    @click="handleClickAlreadyLike(item)"
                  />
                </span>
              </div>
              <div
                class="pingjia-maininfo--desc"
                style="word-break: break-all;"
              >{{ item.parent.content }}</div>
              <div class="pingjia-maininfo--footer">
                <span>{{ item.parent.timePassed }}</span>
                <span style="padding:0 0.09rem;">·</span>
                <span @click="handleClickReview(item)">{{ item.parent.commentNum }}回复</span>

                <ui-icon
                  name="delete"
                  size="0.4rem"
                  v-if="item.parent.isDeletable==1"
                  @click="handleClickDeleteReview(item.parent.commentId , parentIndex , list)"
                />
              </div>
            </div>
            <div class="pingjia-sub-container" v-if="item.children && item.children.length">
              <div class="sub-item" v-for="(childrenItem, index) in item.children" :key="index">
                <div class="sub-header">
                  <span>
                    <span class="sub-header--avatar">
                      <img :src="childrenItem.avatar" alt />
                    </span>
                    <span class="sub-header--nickname">{{ childrenItem.nickName }}</span>
                  </span>
                  <span class="sub-header--time">
                    <span>{{childrenItem.timePassed}}</span>
                    <span
                      v-if=" childrenItem.isDeletable ==1"
                      @click="handleClickDeleteReview(childrenItem.commentId , index , item.children)"
                    >
                      <ui-icon name="ui-icon-delete" size="28rpx" />
                    </span>
                  </span>
                </div>
                <div class="sub-body" style="word-break: break-all;">{{ childrenItem.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </uiScroll>
    </div>
  </div>
</template>

<script>
import uiIcon from "@/components/base/icon/index";
import uiRate from "@/components/base/rate/index";
import uiScroll from "@/components/base/scroll/mescroll-body";
import uiScrollMixins from "@/components/base/scroll/mescroll-mixins.js";
import {
  selectAverageScoreById,
  selectCommentsByPage,
  addCommentLike
} from "api/order/lession.js";
import { deleteMyComment } from "api/order/order.js";
export default {
  name: "lessonEvaluate",
  props: {
    lessonId: [String, Number],
    buyFlag: [Number, String]
  },
  components: {
    uiScroll,
    uiIcon,
    uiRate
  },
  mixins: [uiScrollMixins],
  data() {
    return {
      score: {},
      isloading: false,
      finished: false,
      list: [],
      page: {
        currentPage: 0,
        pageNumber: 10,
        totalNumber: 0,
        totalPage: 1
      },
      // 下拉刷新的常用配置
      downOption: {
        use: false, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        textNoMore: "没有更多数据",
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 5, // 每页数据的数量,默认10
          totalPage: 1
        },
        empty: {
          tip: "暂无相关数据"
        }
      }
    };
  },
  created() {
    this.loadSelectAverageScore();
    // this.loadComments();
  },
  mounted() {},
  methods: {
    /**
     * 我要评价
     * 点击跳转到课程评价页面
     */
    handleClickGotoEvaluate() {
      // 判断用户是否登录
      // if (this.$utils.judgeUserIsVisitor(this)) return;
      // 已购买过或者是当前课程的讲师
      if (this.buyFlag === 1) {
        this.$toast("请先购买课程才能参与评价");
        return;
      }

      this.$url.navigateTo({
        url: "/pages/lesson-detail/evaluate/index",
        query: {
          id: `${this.lessonId}`
        }
      });
    },
    //查分数
    loadSelectAverageScore() {
      var params = {
        lessonId: this.lessonId
      };
      var self = this;
      selectAverageScoreById(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          self.$toast.fail(respMsg);
        }
        if (result) {
          self.score = result;
        }
      });
    },

    //分页查询评价内容
    loadComments(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条

      var params = {
        page: {
          currentPage: page.num,
          pageNumber: pageSize
        },
        lessonId: this.lessonId
      };
      var _this = this;
      selectCommentsByPage(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          self.$toast.fail(respMsg);
        }

        this.showComments = true;
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(result.list); //追加新数据
        this.mescroll.endByPage(this.list.length, result.page.totalPage);
      });
    },

    //用户点赞
    handleClickAlreadyLike(item) {
      // 判断用户是否登录
      if (this.$utils.judgeUserIsVisitor(this)) return;
      var self = this;
      var params = {
        commentId: item.parent.commentId
      };
      addCommentLike(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;
        if (respCode !== "0") {
          self.$toast.fail(respMsg);
        }
        if (item.parent.isAlreadyLike === 2) {
          this.$toast.success("点赞成功");
          item.parent.likeNum = item.parent.likeNum + 1;
          item.parent.isAlreadyLike = item.parent.isAlreadyLike === 1 ? 2 : 1;
        } else {
          this.$toast.success("取消点赞");
          item.parent.likeNum = item.parent.likeNum - 1;
          item.parent.isAlreadyLike = item.parent.isAlreadyLike === 1 ? 2 : 1;
        }
      });
    },

    //微信端用户回复
    handleClickReview(val) {
      // 判断用户是否登录
      // if (this.$utils.judgeUserIsVisitor(this)) return;
      // 已购买过或者是当前课程的讲师
      if (this.buyFlag === 1) {
        this.$toast("请先购买课程才能参与回复");
        return;
      }
      // this.$router.push({
      //   path: `/lession/reply`,
      //   query: {
      //     replyId: val.parent.userId,
      //     lessonId: val.parent.lessonId,
      //     parentId: val.parent.commentId,
      //     commentId: val.parent.commentId,
      //     nickName: val.parent.nickName,
      //     sid: this.$route.query.sid
      //   }
      // });

      this.$url.navigateTo({
        url: "/pages/lesson-detail/reply/index",
        query: {
          replyId: val.parent.userId,
          lessonId: val.parent.lessonId,
          parentId: val.parent.commentId,
          commentId: val.parent.commentId,
          nickName: val.parent.nickName
        }
      });
    },

    handleClickDeleteReview(commentId, index, list) {
      let _this = this;
      // 判断用户是否登录
      // if (this.$utils.judgeUserIsVisitor(this)) return;
      // 已购买过或者是当前课程的讲师
      if (this.buyFlag === 1) {
        this.$toast("请先购买课程才能参与评价");
        return;
      }
      // 提示是否购买此课程
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否删除此评论？",
          confirmButtonText: "删除"
        })
        .then(() => {
          deleteMyComment({ commentId: commentId }).then(
            ({ respCode, respMsg, result }) => {
              if (respCode == 0) {
                list.splice(index, 1);
                _this.$toast.success("删除评论成功");
              } else {
                this.$toast.fail(`${respMsg}`);
              }
            }
          );
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss">
.lession-evaluate {
  background-color: #fff;

  .evaluate-score {
    padding: 0 30rpx;
    height: 185rpx;
    border-bottom: 0.013333rem solid #e7e7f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .score-left {
      .score-left--defen {
        font-family: PingFang-SC-Bold;
        font-size: 54rpx;
        font-weight: 600;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0px;
        color: #f54305;
      }

      .score-left--manfen {
        margin-left: 10rpx;
        font-family: PingFang-SC-Medium;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        // line-height: 40px;
        letter-spacing: 0px;
        color: #aeafc0;
      }
      .score-left--dengji {
        margin-top: 20rpx;
      }
    }

    .score-right {
      width: 160rpx;
      height: 54rpx;
      background-image: linear-gradient(90deg, #f54305 0%, #f57c4b 100%);
      border-radius: 27rpx;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      color: #fffefe;
      text-align: center;
      line-height: 54rpx;
    }
  }
  .evaluate-content-container {
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  .evaluate-pinjia {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 30rpx 0;
    box-sizing: border-box;
    .pingjia-avatar {
      flex: 0 0 90rpx;
      height: 88rpx;
      line-height: 88rpx;
      & > image {
        height: 70rpx;
        width: 70rpx;
        border-radius: 50%;
      }
    }
    .pingjia-content {
      flex: 1;
      width: 600rpx;
    }
    .pingjia-maininfo {
      .pingjia-maininfo--info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 22rpx 0;
      }
      .pingjia-maininfo--name {
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #2c2c35;
      }
      .pingjia-maininfo--rate {
        margin-left: 36rpx;
        .van-rate__item .van-icon {
          font-size: 24rpx;
        }
      }
      //
      .pingjia-maininfo--jigezan {
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0px;
        color: #7b8196;
        margin-right: 8rpx;
      }
      //
      .pingjia-maininfo--pinlun-dianzan {
        height: 26rpx;
        width: 26rpx;
      }
      .pingjia-maininfo--desc {
        margin-top: 23rpx;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0px;
        color: #2c2c35;
      }

      .pingjia-maininfo--footer {
        margin-top: 40rpx;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0rpx;
        color: #7b8196;
        display: flex;
        align-items: center;
        i {
          margin-left: 2rpx;
          color: #2f2d36;
        }
      }
    }

    .pingjia-sub-container {
      background-color: #f8f9fa;
      padding: 26rpx;
      .sub-item {
        margin-top: 54rpx;
        &:first-child {
          margin-top: 0;
        }
        .sub-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          & > span {
            display: flex;
            flex-direction: row;
            align-items: center;
          }
          .sub-header--avatar {
            height: 34rpx;
            width: 34rpx;
            image {
              height: 34rpx;
              width: 34rpx;
              border-radius: 50%;
            }
          }
          .sub-header--nickname {
            margin-left: 16rpx;
            font-size: 28rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 40rpx;
            letter-spacing: 0px;
            color: #7b8196;
          }
          .sub-header--time {
            font-size: 24rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 40rpx;
            letter-spacing: 0px;
            color: #aeafc0;
            display: flex;
            align-items: center;
            span + span {
              margin-left: 12rpx;
              line-height: 40rpx;
              i {
                line-height: 40rpx;
                color: #2f2d36;
              }
            }
          }
        }
        .sub-body {
          margin-top: 22rpx;
          font-size: 28rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40rpx;
          letter-spacing: 0rpx;
          color: #2c2c35;
        }
      }
    }

    .pinjia-top {
      padding: 0.266667rem 0;
      height: 0.933333rem;
      line-height: 0.933333rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .touxiang {
        width: 0.933333rem;
        height: 0.933333rem;
        border-radius: 50%;
      }

      .nichen {
        font-family: PingFang-SC-Bold;
        font-size: 0.373333rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #2c2c35;
        padding-right: 0.48rem;
      }

      .xingji {
        padding-right: 1rem;
      }

      .jitianqian {
        font-family: PingFang-SC-Medium;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #7b8196;
      }

      .pinlun-dianzan {
        width: 0.386667rem;
        height: 0.36rem;
        // padding-left: 7.5rem;
        // padding-right: .4rem;
      }
    }

    .pinjia-content {
      // width: 7.066667rem;
      padding: 0.306667rem 1.186667rem 0.533333rem 0.933333rem;
      color: #2c2c35;
      font-size: 0.373333rem;
      overflow: hidden;
    }

    .pinjia-bottom {
      // .dianzan {
      //   width: .386667rem;
      //   height: .36rem;
      //   padding-left: 7.5rem;
      //   padding-right: .4rem;
      // }

      // .xiepinlun {
      //   width: .4rem;
      //   height: .346667rem;
      // }
      padding-left: 0.933333rem;

      .longago {
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #7b8196;
      }

      .reviewNum {
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        color: #2c2c35;
      }
    }

    .pinjia-review {
      width: 7rem;
      padding: 0.266667rem;
      margin-left: 1rem;

      .review {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.4rem;

        .review-touxiang {
          display: flex;
          align-items: center;

          span {
            color: #7b8196;
            font-size: 0.373333rem;
            display: inline-block;
            margin-left: 0.066667rem;
          }

          div {
            vertical-align: middle;
            display: inline-block;
            width: 0.48rem;
            height: 0.48rem;
            border-radius: 50%;
            text-align: right;
            background-color: #aeafc0;

            img {
              width: 100%;
              border-radius: 50%;
              height: 100%;
            }
          }
        }

        .shijian-review {
          color: #7b8196;
          font-size: 0.373333rem;
        }
      }

      .review-content {
        font-size: 0.373333rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #2c2c35;
        margin-top: 0.213333rem;
      }
    }
  }
}
</style>
